<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>talk</title>
<style>

#im-chat-container{
  	width: 670px;
  	height: 100%;
 	margin:0 auto ;
	/* vertical-align:middle;*/
  	float: left;
 	 border: 1px solid #bebebe;
  	background: #fff;
 	 margin-left: 200px;
  	overflow: hidden;
 	display: none;
  	position: relative;
}

.im-chat-title {
  height: 42px;
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid #e6e6e6;
  overflow: hidden;
  background: #eee;
}

.im-msb-content textarea {
  width: 650px;
  height: 77px;
  display: block;
  border: 0;
  padding: 5px 10px;
  resize: none;
  outline: 0;
  background-color: #fff;
}	

.im-msb-operation {
  height: 28px;
  line-height: 28px;
  background: #eee;
  border-top: 1px solid #e7e7e7;
}
.im-msbc-footer {
  width: 670px;
  height: 37px;
  background: #f5f5f5;
  overflow: hidden;
}
a.im-msbc-btn {
  height: 24px;
  line-height: 22px;
  margin: 5px 6px 5px 15px;
  display: inline-block;
  background: #006fc2;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  padding: 0 20px;
  float: right;
}

<!--  消息内容-->
.msg-list-all{
	width:

}



.msg-list {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
 ul.clearfix, li.clearfix {
	margin: 8px;
	padding: 8px;
	list-style: none;
}
.msg-part .sendingMsg {
	position: absolute;
	left: -25px;
	display: block;
	width: 20px;
	height: 20px;
}
.my .msg-part .content {
	float: right;
}
.msg-part .content {
	font-size: 12px;
	line-height: 18px;
}
.my .content {
	border: 1px solid #cddff2;
	background: #e1f5ff;
}
.msg-part .content {
	position: relative;
	display: inline-block;
	font-size: 12px;
	color: #333333;
	border-radius: 5px;
	padding: 10px;
	margin: 8px 0 0 0;
	word-break: break-all;
	-webkit-user-select: text;
}
.my .msg-part {
	float: right;
	margin-right: 10px;
}
.msg-part {
	max-width: 70%;
}

</style>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".im-msbc-btn").click(function(){
		addcontext();
	});
	function addcontext(){
		var  $msg=$(".im-chat-p-ms");
		if ($msg.children().length <10){
		var context="<div><p>今天天气真好1</p></div>";
			$(".im-chat-p-ms").append(context);
		}
	};
})
</script>
</head>
<body>

	<div id ="im-chat-container" class="im-chat-container" style="display: block;">
		<!-- 消息标题 -->
		<div class="im-chat-title">
			<span class="im-char-usersnum">聊天</span>
		</div>
        <div class="msg-list-all" >
			<ul class="msg-list" data-id="" scroll-load-history scroll-bottom-list>
				<!--
				<li class="load-more-msg" ng-if="msgList.showMore" click-load-history><a href="javascript:void(0)">查看更多消息</a></li>
				<li class="loading-img" ng-show="msgList.loading"><img src="../../images/loading.gif" alt="正在加载中..." /></li>
				--> 
				<li class="clearfix" repeat="msgItem in msgList.list">
					<message></message>
					<div class ="msgbox" msgid="1" >
						<!--
						<div class ="photo">
							//放图片，暂时不用
						</div>
						-->
						<div class="msgpart">
							<span class="sendname">
								群主
							</span>
							<span class="sendtime">
								01-21 14:34:12
							</span>
						</div>
						<div class="msgcontext">
							<div class ="sendingMsg"></div>
							<a>我是一直小毛驴</a>
						</div>
					</div>
				</li>
				
				<li class="clearfix"  repeat="msgItem in msgList.list" >
					<message></message>
					<div class ="msgbox" msgid="1" >
						<!--
						<div class ="photo">
							//放图片，暂时不用
						</div>
						-->
						<div class="msgpart">
							<span class="sendname">
								群主
							</span>
							<span class="sendtime">
								01-21 14:34:12
							</span>
						</div>
						<div class="msgcontext">
							<div class ="sendingMsg"></div>
							<a>我是一直小毛驴</a>
						</div>
					</div>
				</li>
			</ul>
			<!--
			<div class="latest-msg" ng-if="msgList.showLatestMsg" latest-msg-handler>
				<p class="ellipsis">最新消息：<span ng-bind="msgList.list[msgList.list.length - 1].content"></span></p>
				<span class="close-latest">×</span>
			</div>
			--> 
		</div>
        <!-- 消息发送区域 -->     
		<div class="im-message-sendbox ">
            <ul class="im-msb-operation">
        		<li>表情</li>
    		</ul>
    		<div class="im-msb-content">
        		<textarea id="im-msbc-box" class="textarea"></textarea>
        		<div class="im-msbc-footer">
            		<a class="im-msbc-btn" href="javascript:;" title="发送">发送</a>
        		</div>
    		</div>
		</div>    
    </div> 
    
</body>
<script>
	
</script>
</html>    